<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <title>Flickr Tag Recommendation</title>         
 <style type="text/css"> 
            h1 {
                margin: 5px;
                float: left;
                font-family: Garamond, serif;
                text-decoration: none;
            }
            .clear {
                clear: both;
            }
            #map {
                border: 1px solid gray;
                position: absolute;
                left: 325px;
                right: 5px;
                top: 70px;
                bottom: 5px;
		        font-size: 0px;
            }
            #image {
                width: 300px;
                border: 1px solid gray;
                position: absolute;
                bottom: 5px;
                overflow: hidden;
            }
            #image img {
                width: 300px;
            }
            #form {
                float: left;
                line-height: 300%;
                margin: 10px;
            }
            #footer {
                text-align: center;
                clear: both;
                position: absolute;
                font-size: smaller;
                bottom: 10px;
                margin: 0 auto;
                white-space: nowrap;
                right: 15px;
            }
 </style>
 <link rel="stylesheet" href="./script/theme/prettyLoader.css" type="text/css" />
 <link rel="stylesheet" href="./script/theme/apprise.min.css" type="text/css" />
 <script type="text/javascript" src="./script/jquery-1.2.3.min.js"></script> 
 <script type="text/javascript" src="./script/jquery.exif.js"></script> 
 <script type="text/javascript" src="./script/OpenLayers.js"></script> 
 <script type="text/javascript" src="./script/apprise-1.5.min.js"></script> 
 <script type="text/javascript" src="./script/jquery.prettyLoader.js"></script> 
 <script type="text/javascript">
       var maxWidth = 300;
       var maxHeight = 350;
       var fileTypes = [ "gif","png","jpg","jpeg" ];
       var globalPic;
       var map, v;
       var point;
       function init() {
           $(document).ready(function() { $.prettyLoader(); });
	       var lat = 0.0;
           var lng = 0.0;
           map = new OpenLayers.Map("map");
           var m = new OpenLayers.Layer.OSM("World Map");
           v = new OpenLayers.Layer.Vector("Vector Layer", {} );	   
	       map.addLayers([m, v]);
	       var control = new OpenLayers.Control.DragFeature(v);
           map.addControl(control);
	       map.addControl(new OpenLayers.Control.OverviewMap());
           control.activate();
           point = new OpenLayers.Geometry.Point(lng, lat);
           point.transform(
             new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
             map.getProjectionObject() // to Spherical Mercator Projection
           );
	       var pf = new OpenLayers.Feature.Vector(
                                                point, null,
                                                OpenLayers.Util.extend({},OpenLayers.Feature.Vector.style["default"])
                                                 );
	       v.addFeatures([pf]);
	       map.setCenter(new OpenLayers.LonLat(lng, lat), 5);
       }
       function preview ( what ) {           
           var src = what.value;
           var ext = src.substring(src.lastIndexOf(".")+1,src.length).toLowerCase();
           for (var i=0; i<fileTypes.length; i++) if (fileTypes[i] == ext) break;
           globalPic = new Image();
           if (i < fileTypes.length) {
              var reader = new FileReader();
              reader.onload = function(evt) { globalPic.src = evt.target.result; };
              reader.readAsDataURL(what.files[0]);
              $(what).exifLoadFile();
           } else {
             if (src.length > 0) {
               globalPic.src = "nophoto.jpg";
               alert("Please upload a valid image file with an appropriate extention.");
             }
           }
           if (src.length > 0) setTimeout("applyChanges()",200);
       }
       function applyChanges() {
           var field = document.getElementById("img");
           var x = parseInt(globalPic.width);
           var y = parseInt(globalPic.height);
           if (x>maxWidth) { y *= maxWidth/x; x = maxWidth; }
           if (y>maxHeight) { x *= maxHeight/y; y = maxHeight; }
   	       if (x<maxWidth && y<maxHeight) {
              if (x>y) { y *= maxWidth/x; x = maxWidth; }
              else { x *= maxHeight/y; y = maxHeight; }
           }
           field.style.display = ( x < 1 || y < 1 ) ? "none" : "";
           field.src = globalPic.src;
           field.width = x;
           field.height = y;
           var aLat = $("#picField").exif("GPSLatitude").toString().split(",");
	       var aLong = $("#picField").exif("GPSLongitude").toString().split(","); 
	       var strLatRef = $("#picField").exif("GPSLatitudeRef") || "N";
	       var strLongRef = $("#picField").exif("GPSLongitudeRef") || "W";
	       var fLat = (parseFloat(aLat[0]) + parseFloat(aLat[1])/60.0 + parseFloat(aLat[2])/3600.0) * 
                      (strLatRef == "N" ? 1.0 : -1.0);
	       var fLong = (parseFloat(aLong[0]) + parseFloat(aLong[1])/60.0 + parseFloat(aLong[2])/3600.0) * 
                       (strLongRef == "W" ? -1.0 : 1.0);
	       if ( isNaN(fLat) ||  isNaN(fLong) ) return;
           v.removeAllFeatures();
           point = new OpenLayers.Geometry.Point(fLong, fLat);
           point.transform(
              new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
              map.getProjectionObject() // to Spherical Mercator Projection
           );
	       var pointFeature = new OpenLayers.Feature.Vector(
                                               point, null,
                                               OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style["default"])
                                                           );
	       v.addFeatures([pointFeature]);
           map.panTo(new OpenLayers.LonLat(fLong, fLat).transform(
                                                                  new OpenLayers.Projection("EPSG:4326"), 
                                                                  map.getProjectionObject())
                                                                 );
       };
       function notifytags (string, args) {
	     apprise(string, args, function(r) {
		   if(r) { 
			if(typeof(r)=='string') { $('#returns').text(r); }
			else { $('#returns').text('True'); }
		   } else { $('#returns').text('False'); }
		 });
	   };
       function changePoint ( ) { 
           var pnt = point.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
           document.getElementById("point").value = "" + pnt;
           var xmlHttpReq = false;
           if (window.XMLHttpRequest) {
              xmlHttpReq = new XMLHttpRequest();
           } else if (window.ActiveXObject) {
              xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
           }
           $.prettyLoader.show();
           xmlHttpReq.open('POST', 'tagrec/results.xml', true);
           xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
           xmlHttpReq.onreadystatechange = function() {
             $.prettyLoader.hide();
             if (xmlHttpReq.readyState == 4) {
               var element = xmlHttpReq.responseXML.getElementsByTagName('tag');
			   if (element && element.length > 0) {
                 var tags = element.item(0).firstChild.data;
                 for ( i = 1 ; i < element.length ; i++ ) tags += " " + element.item(i).firstChild.data;
                 // notifytags(tags);
                 alert(tags);
               }
             }
           }
           xmlHttpReq.send("point=" + escape(document.getElementById("point").value) + "&maxtags=" + escape(document.getElementById("maxtags").value));
       };
 </script> 
 </head> 
 <body onload="init()"> 
        <h1 id="title">Flickr Tag Recommender</h1>
        <div class="clear"></div> 
        <div id="form">
           <input type="file" id="picField" onchange="preview(this)" />
           <br/>
           <input type="submit" onclick="changePoint()" />
           <input type="hidden" id="point" name="point" value="POINT(0 0)" />
           <input type="hidden" id="maxtags" name="maxtags" value="10" />
	       <div id="image"><img alt="The photo" id="img" exif="true" src="nophoto.jpg" /></div>
        </div>
        <div id="map"></div>
        <div class="clear"></div> 
        <div id="footer">Flickr Tag Recommender - <a href="">DMIR/INESC-ID</a> - Prototype by Ana Silva and Joao Domingos</div>
 </body>
</html>
